<template>
	<modal :show="visible" custom padding="0" width="90%" radius="18rpx">
		<view class="header">
			<image src="/static/images/index/round_close_btn.png" @tap="$emit('cancel')"></image>
		</view>
		<swiper :duration="1000" indicator-dots class="swiper" autoplay :interval="3000">
			<swiper-item v-for="(image, index) in bannerimgs" :key="index" class="swiper-item">
				<image :src="image" class="w-100 h-100"></image>
			</swiper-item>
		</swiper>
		<scroll-view scroll-y class="content">
			<view class="wrapper">
				<view class="title">{{productData.goodName}}</view>
				<view class="mb-10">产品描述</view>
				<view class="mb-20">{{ productData.description}}</view>
				<view class="materials" 
				v-if="productData.form"
				:key="ind"
				 v-for="(item,ind) in materials.tree">
					<view class="group-name" v-if="productData.form">{{ item.k }}</view>
					<view class="values">
						<view class="value" :class="{selected: material.select}" v-for="(material, index) in item.v" :key="index" @tap="changeMaterialSelected(item.k, material.name)">
							{{ material.name }}
						</view>
					</view>
				</view>
			</view>
			<!-- <view>评价<span style="float: right;" @tap="rate(productData.goods_id)">查看全部</span></view>
			<view class="goods-xq">商品详情</view>
			<rich-text :nodes="productData.content"></rich-text> -->
		</scroll-view>
		<view class="bottom" :style="{height: !is_single ? '250rpx' : '200rpx'}">
			<view class="d-flex align-items-center">
				<view class="price-and-materials">
					<view class="price">￥{{ productData.price}}</view>
					<view class="materials" v-show="materials">{{materials.name}}</view>
				</view>
				<actions :number="productData.number" @add="add" @minus="minus"></actions>
			</view>
			<button type="primary" class="add-cart-btn" @tap="addToCart">加入购物车</button>
		</view>
	</modal>
</template>

<script>
	import Modal from '@/components/modal/modal.vue'
	import Actions from '../actions/actions.vue'
	import product from '@/api/product.js'

	export default {
		name: 'ProductModal',
		components: {
			Modal,
			Actions
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			product: {
				type: Object
			}
		},
		data() {
			return {
				getimg: this.$getimg,
				bannerimgs: [],
				is_single: true,
				materials: [],
				skuData:[],
				productData: {},
				sku_id: -1,
			}
		},
		watch: {
			product: function(val) {
				this.materials = []
				this.productData = val
				this.productData.form=true;
				this.productData.number=1;
				if (val.detailImages) {
					this.bannerimgs = val.detailImages;
				}
				if (val.ysGoodsSku) {
					let skuAttrs=Object.assign([], JSON.parse(val.ysGoodsSku).attrs);
					let skuDatas=Object.assign([], JSON.parse(val.ysGoodsSku).data);
					this.skuData=skuDatas;
					let tree= skuAttrs.map((item=>{
							let detail=item.detail.map((eve)=>{
								return {name:eve,select:false};
							});
							item={
								k:item.value,
								v:detail
							}
							return item;
						}));
					this.materials ={tree}
					for(let k in this.materials.tree)
					{
						for(let key in this.materials.tree[k].v)
						{
							if(key == 0) {
								this.materials.tree[k].v[key].select = true;
							}
							else {
								this.materials.tree[k].v[key].select = false;
							}
						}
					}
					this.calcSpecification();
				}
			},
			
		},
		methods: {
			share(){
				
			},
			changeMaterialSelected(groupName, value) {
				let tree = this.materials.tree;
				for(let k in tree) {
					if(tree[k].k == groupName) {
						for(let key in tree[k].v) {
							if(tree[k].v[key].name == value) {
								tree[k].v[key].select = true;
							}
							else {
								tree[k].v[key].select = false;
							}
						}
					}
				}
				this.materials.tree = [];
				for(let k in tree) {
					this.materials.tree.push(tree[k]);
				}
				this.calcSpecification();
				this.productData.number = 1
			},
			
			// 计算所选规格的价格和所属的 list 中的 id
			calcSpecification() {
				if(!this.productData.is_sku){
					return;
				}
				let json_sku = this.materials;
				let tree = json_sku.tree;
				let materials_text="";
				for(let tree_k in tree)
				{
					for(let v_key in tree[tree_k].v)
					{
						if(tree[tree_k].v[v_key].select) {
							materials_text += ',' + tree[tree_k].v[v_key].name;
						}
					}
				}
				let attr=this.skuData.filter((item)=>{
					return item.attr==materials_text.substr(1,materials_text.length);
				})[0];
				//更新价格
				this.productData.price=attr.price;
				this.productData.materials_text=materials_text.substr(1,materials_text.length);
				console.log();
			},
			
			add() {
				this.productData.number += 1
				// 使用 $set 未解决数据不渲染问题
				// this.$set(this.productData, 'number', this.productData.number+1);
				this.$forceUpdate();
			},
			minus() {
				if (this.productData.number == 1) {
					return
				}
				this.productData.number -= 1
				this.$forceUpdate();
			},
			addToCart() {
				const product = {
					...this.productData,
					'materials_price': this.materials.price,
					'materials_sku_id': this.materials.sku_id,
				}
				product.price = this.productData.price
				this.$emit('add-to-cart', product)
			},
			//数据重组
			reCount(res) {
				console.log('reCount')
				let arr = []
				if (res.sku && res.sku[0] && res.sku[0].json.tree.length > 0) {
					this.is_sku = true
					res['form'] = res.sku[0].json.tree[0].v[0]
					for (let k in res.sku[0].json.list) {
						let v = res.sku[0].json.list[k]
						arr.push({
							id: v.id,
							pid: v.s1 - k,
							name: v.s1_name,
							price: v.price,
							oldprice: v.price,
							select: k == 0 ? true : false
						})
					}
					res['form_child'] = arr
				}
				if (res.reduction) {
					if (res.sku && res.sku[0] && res.sku[0].json.tree.length > 0) {
						for (let k in arr) {
							let v = arr[k]
							if (v.price > res.reduction.full) {
								v.price = (v.price * 10000 - res.reduction.reduce * 10000) / 10000
							}
						}
					} else {
						if (res.price > res.reduction.full) {
							res.price = (res.price * 10000 - res.reduction.reduce * 10000) / 10000
						}

					}

				}
				res['number'] = 0
				res['id'] = res.goods_id
				res['name'] = res.goods_name

				return res
			},
			rate(id) {
				uni.navigateTo({
					url: '/pages/rate/rate?goods_id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		padding: 20rpx 30rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: flex-end;
		z-index: 11;

		image {
			width: 60rpx;
			height: 60rpx;
			margin-left: 20rpx;
			&:first-child {
				margin-left: 0;
			}
		}
	}

	.swiper {
		height: 426rpx;
	}

	.content {
		// border: 2rpx solid red;
		display: flex;
		flex-direction: column;
		font-size: $font-size-sm;
		color: $text-color-assist;
		min-height: 1vh;
		padding: 30rpx 30rpx 10rpx;
		max-height: calc(100vh - 100rpx - 426rpx - 250rpx);
		overflow-y: scroll;

		.goods-xq {
			margin-bottom: 10rpx;
		}

		.wrapper {
			width: 100%;
			height: 100%;
			overflow: hidden;
			// padding: 30rpx 30rpx 20rpx;
		}

		.title {
			font-size: $font-size-extra-lg;
			color: $text-color-base;
			font-weight: bold;
			margin-bottom: 10rpx;
		}

		.labels {
			display: flex;
			font-size: 20rpx;
			margin-bottom: 10rpx;
			overflow: hidden;
			flex-wrap: wrap;

			.label {
				max-width: 40%;
				padding: 6rpx 10rpx;
				margin-right: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.materials {
			width: 80%;
			margin-bottom: 20rpx;
			margin-top: 10rpx;

			.group-name {
				padding: 10rpx 0;
			}

			.values {
				display: flex;
				flex-wrap: wrap;
				overflow: hidden;

				.value {
					background-color: #f5f5f7;
					color: $font-size-base;
					padding: 10rpx 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: $border-radius-lg;

					&.selected {
						background-color: $color-primary;
						color: $bg-color-white;
					}
				}
			}
		}
	}

	.bottom {
		padding: 20rpx 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-top: 1rpx solid rgba($color: $border-color, $alpha: 0.3);
		background-color: $bg-color-white;
		position: relative;
		z-index: 11;

		.price-and-materials {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			margin-right: 10rpx;

			.price {
				color: $color-primary;
				font-size: $font-size-extra-lg;
				font-weight: bold;
			}

			.materials {
				font-size: $font-size-sm;
				color: $text-color-assist;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}

		.add-cart-btn {
			margin-top: 20rpx;
			font-size: $font-size-lg;
			border-radius: $border-radius-base;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 90rpx;
		}
	}
</style>
